<template>
    <div class="_homepage">
        <el-container class="bigcontain is-vertical">
            <!--            插入头-->
            <v-header></v-header>
            <el-container>
                <v-Aside></v-Aside>
                <el-container class="rightcontain is-vertical">
                    <v-Tag></v-Tag>
                    <el-container class="is-vertical scroll">
                        <el-main class="textmain">
                            <!--                            动画 -->
                            <transition name="fade" mode="out-in">
                                <router-view class="view"></router-view>
                            </transition>
                        </el-main>
                        <v-Footer></v-Footer>
                    </el-container>
                </el-container>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    import vAside from "./aside";
    import vFooter from "./footer";
    import vHeader from "./header";
    import vTag from "./tag";

    export default {
        name: "homepage",
        components: {
            vHeader, // 注册组件header vHeader 驼峰命名，使用的时候用v-Header，遵循vue的标准规范
            vAside,
            vTag,
            vFooter
        }
    }
</script>

<style lang="scss" scoped>
    ._homepage {
        .bigcontain {
            height: 100vh;

            .rightcontain {
                overflow: auto;

                .scroll { // + 右侧添加任务 布局设置
                    height: calc(100vh - 160px); // 与顶端差160 >（80+40）
                    overflow: auto;

                    .textmain {
                        overflow: visible;
                    }
                }
            }
        }
    }

</style>